如果看過上一篇的 layout/default 的截圖，可以大概了解 blog 的樣子。

這邊先簡單拆分為兩個部分：

管理者相關(使用 layout/admin)：

• admin:
  • index: 列出所有文章(暫時不做 pagination)
  • signIn: 登入頁
  • addPost: 新增文章
  • postId: 編輯文章

使用者相關(使用 layout/default)：

• about: 關於我，用來介紹自己
• pages: 列出第 N 頁的文章
• posts:
  • index: 全文章標題列表
  • postId: 單篇文章瀏覽
• tags:
  • index: 全部的 Tag 統計列表
  • tagId: 該 tag 相關所有文章列表

以上就是部落格基本的格式，之後的篇幅會逐步完成。

步驟大致上分為：

• 各 UI 元件開發
• Firebase 登入 & vuex/auth.js
• Firestore & vuex
• 各頁面切版與串接資料
• 優化與部署細節

程式碼放在以下 branch:

012-init-needed-pages

指令：

git clone -b 012-init-needed-pages --single-branch https://github.com/hunterliu1003/blog.git
cd blog
npm install
npm run dev
# 連結至 localhost:8787

今天的內容較少，但已將所有需要的 pages 結構建立好如下圖：

可以透過以下網址看到各個路由：

localhost:8787
localhost:8787/about
localhost:8787/posts
localhost:8787/posts/1
localhost:8787/tags
localhost:8787/tags/tagName
localhost:8787/admin
localhost:8787/admin/signIn
localhost:8787/admin/addPost
localhost:8787/admin/1